{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>

{/block}
<!--下面 每个页面的特色css-->
{block name="titleStyle"}
<style type="text/css">
	div,
	span {
		width: 140px;
		height: 140px;
		margin: 20px;
		background: #9999CC;
		border: #000 1px solid;
		float: left;
		font-size: 17px;
		font-family: Roman;
	}

	div.mini {
		width: 30px;
		height: 30px;
		background: #CC66FF;
		border: #000 1px solid;
		font-size: 12px;
		font-family: Roman;
	}
</style>

{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<input type="button" value="改变 id 为 one 的元素58的背景色为 #0000FF" id="b1" />
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2" />
<input type="button" value=" 改变元素名为  div #b3" id="b3" />
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4" />
<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5" />
	<input type="button" value=" div里的内容有two的  改变颜色为红色" id="b6" />
<div id="one" class="mini">
	div id为one
</div>
<div id="two">
	div id为two
</div>

<div id="three" class="mini">
	div id为three
</div>


<span id="s_one" class="mini">
	span one
</span>

<span id="s_two">
	span two
</span>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h6>代码</h6>
<pre>
	&lt;script language="javascript"&gt;
	window.onload = function () {  //先加载页面内容 再加载js
		//************改变 id 为 one 的元素的背景色为 #0000FF***********
		
		$('#b1').click(
			function () {

				$('#one').css("background", "#0000FF");  //<b>id选择器 </b>
			}
		);

		//*****改变 class 为 mini 的所有元素的背景色为 #FF0033

		$('#b2').click(                       // <b> class 选择器 </b>
			function () {
				$('.mini').css("background", " #FF0033");

			}
		);

		//******改变元素名为 &lt;div&gt; 的所有元素的背景色为 #00FFFF
		$('#b3').click(                       //<b> 标签选择器  </b>
			function () {
				//$('div').css("background","#00FFFF");
				$('div').css("background", "#00FFFF");
			}
		);

		//******改变所有元素的背景色为 #00FF33

		$('#b4').click(
			function () {                              //<b> 通配符选择器  </b>
				$("*").css("background", "#00FF33");
			}
		);

		//*****改变所有的&lt;span&gt;元素和 id 为 two class .mini 的元素的背景色为 #3399FF
		$('#b5').click(                          //<b>  联合并列选择器 </b>
			function () {
				//??
				$('span,#two,.mini').css("background", "#3399FF");
			}
		)

		// 改变div内容里有two 的 颜色 为red
	   $('#b6').click(                          //<b>内容选择器</b>
			function () {
				//??
				$('div:contains(two)').css("background", "red");
			}
		)

		//***********end*************


	}
&lt;/script&gt;

	 </pre>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">
	window.onload = function () {  //先加载页面内容 再加载js
		//************改变 id 为 one 的元素的背景色为 #0000FF***********
		
		$('#b1').click(
			function () {

				$('#one').css("background", "#0000FF");  //id选择器
			}
		);

		//*****改变 class 为 mini 的所有元素的背景色为 #FF0033

		$('#b2').click(                       //class 选择器
			function () {
				$('.mini').css("background", " #FF0033");

			}
		);

		//******改变元素名为 <div> 的所有元素的背景色为 #00FFFF
		$('#b3').click(                       //标签选择器
			function () {
				//$('div').css("background","#00FFFF");
				$('div').css("background", "#00FFFF");
			}
		);

		//******改变所有元素的背景色为 #00FF33

		$('#b4').click(
			function () {                              //通配符选择器
				$("*").css("background", "#00FF33");
			}
		);

		//*****改变所有的<span>元素和 id 为 two class .mini 的元素的背景色为 #3399FF
		$('#b5').click(                          //联合并列选择器
			function () {
				//??
				$('span,#two,.mini').css("background", "#3399FF");
			}
		);

       // 改变div内容里有two 的 颜色 为red
	   $('#b6').click(                          //联合并列选择器
			function () {
				//??
				$('div:contains(two)').css("background", "red");
			}
		)

		//***********end*************


	}
</script> {/block}